<template>
  <a-card class="cardClass">
    <div class="condition">
      <div style="margin-right: 5px">课程分类：</div>
      <a-tag color="#f50" v-if="!categoryId">全部</a-tag>
      <a-tag v-else>全部</a-tag>
      <div style="margin-left: 20px">
        <a-cascader
          v-model:value="cateIds"
          :options="cateList"
          v-if="!!cateList"
          style="width: 280px"
          :fieldNames="fieldNames"
          @change="selectCategory"
        >
          <template #displayRender="{ labels, selectedOptions }">
            <span v-for="(label, index) in labels" :key="index">
              <span v-if="index === labels.length - 1">
                {{ label }}
              </span>
              <span v-else>{{ label }} /</span>
            </span>
          </template>
        </a-cascader>
      </div>
    </div>

    <div class="condition">
      <div style="margin-right: 5px">课程名称：</div>
      <a-tag color="#f50" v-if="!courseName">全部</a-tag>
      <a-tag v-else>全部</a-tag>
      <div style="margin-left: 20px">
        <a-input v-model:value="courseName" @change="handleCourseName" style="width: 280px" />
      </div>
    </div>
    <div class="condition">
      <div style="margin-right: 5px">排&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;序：</div>
      <div>
        <a-space :size="[0, 8]" wrap>
          <a-checkable-tag
            v-for="(tag,index) in tagsData"
            :key="index"
            v-model:checked="tag.checked"
            v-show="!!tag?.show"
            @change="checked => handleChange(tag, checked)"
          >
            {{ tag.name }}
          </a-checkable-tag>
        </a-space>
      </div>
    </div>
  </a-card>
</template>
<script lang="ts" setup>
import { onMounted, reactive, ref, watch, watchEffect } from "vue";
import JTreeSelect from "@/components/public/JTreeSelect.vue";
import { useRouter } from "vue-router";
import { apiGetCourseCategoryList } from "@/api/course";
const router = useRouter();

const emit = defineEmits(["orderBySelect", "courseNameChange", "categoryChange"]);
const courseName = ref<any>();
const expandedKeys = ref<(string | number)[]>([]);
const fieldNames = ref({ label: "title", value: "id" });
const cateIds = ref<any>([]);
const categoryId = ref<any>();
const cateList = ref<any>();
const props = defineProps({
  categoryIds: {
    type: String,
    default: ""
  }
});

watchEffect(() => {
  if (props.categoryIds) {
    cateIds.value = props.categoryIds.split(",");
    categoryId.value = cateIds[cateIds.value.length - 1];
    expandedKeys.value.push(...cateIds.value.slice(0, cateIds.value.length - 1));
  }
});

onMounted(() => {
	showFirstLists();
  
});

const tagsData = reactive([
  { type: "1", name: "综合排序", checked: true, show: true },
  { type: "2", name: "发布时间", checked: false, show: true },
  { type: "3", name: "评论数量", checked: false, show: true },
  { type: "4", name: "收藏数量", checked: false, show: true }
]);

const orderByType = ref<string>();

const handleChange = (tag: any, checked: boolean) => {
  if (!!checked) {
    tagsData.forEach((item: any) => {
      if (item.name != tag.name) {
        item.checked = false;
      }
    });
    orderByType.value = tag.type;
  } else {
    orderByType.value = "";
  }
  emit("orderBySelect", orderByType.value);
};

function handleCourseName() {
  emit("courseNameChange", courseName.value);
}

function selectCategory(value, selectedOptions) {
  emit("categoryChange", value);
}

function showFirstLists() {
  if (localStorage.getItem("category")) {
	  cateList.value = JSON.parse(localStorage.getItem("category"));
  } else {
    getCate();
  }
}

async function getCate() {
  // 获取分类数据
  if (!props.hover) {
    const data: any = await apiGetCourseCategoryList(0);
    cateList.value = data.result;
    // 存放分类信息
    localStorage.setItem("category", JSON.stringify(data.result));
  }
}

</script>
<style lang="less" scoped>
.condition {
  font-size: 14px;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  height: 35px;
  width: 100%;
  margin-bottom: 8px;
}

.tagClass {
  margin: 3px 5px;
}

:deep(.ant-card-body) {
  padding: 5px 10px;
}
</style>
